<template>
  <div class="contain">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '180px'">
        <div class="aside-logo">
          <i
            class="el-icon-s-home"
            style="color:white;fontSize:25px;line-height:50px;cursp"
          ></i>
        </div>
        <div class="nav-menu">
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            background-color="#304156"
            text-color="rgb(191, 203, 217)"
            :collapse-transition="false"
            :unique-opened='true'
            active-text-color="rgb(64, 158, 255)"
            router
          >
            <el-menu-item index="/index" @click="addtabs('控制台', 'index')">
              <i class="el-icon-s-data"></i>
              <span slot="title">中台控制台</span>
            </el-menu-item>

            <el-submenu v-for="(item,index) in routes" :index="item.path" :key="index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{item.chin}}</span>
              </template>
              <el-menu-item
                v-for="(itemchild,index) in item.children"
                :key="index"
                :index="itemchild.path"
                @click="addtabs(itemchild.chin, itemchild.name)"
              >
                <i :class="itemchild.icon"></i>{{itemchild.chin}}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header height="80px">
          <div class="header">
            <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse = !isCollapse"></i>
            <span class="title">大大大水扁后台管理系统</span>
            <span class="reset"><i class="el-icon-user-solid"></i>{{username}} <span @click="userreset" style="cursor: pointer;"><i class="el-icon-warning-outline"></i>注销</span></span>
          </div>
          <div class="tem-nav">
            <el-tag
              v-for="(item, index) in tabs.tabsvalue"
              :key="index"
              :type="++index == tabs.tabsindex ? '' : 'info'"
              size="small"
              closable
              @click="handleTo(item.route)"
              @close="handleClose(item.route)"
              >{{ item.msg }}</el-tag
            >
          </div>
        </el-header>
        <el-main>
          <keep-alive :include="whiteList">
            <router-view></router-view>
          </keep-alive>
        </el-main>
        <el-footer height='40px'>
          <p>成都********有限公司</p>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//import { Component, Vue } from "vue-property-decorator";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      isCollapse: false, //控制nav伸缩
      whiteList: ["index"], //页面缓存白名单
      //页面标签信息
      tabs: {
        tabsindex: 1, //当前选择页面
        tabstotle: 1, //tabs总数
        //tabs展示头部信息
        tabsvalue: [
          {
            msg: "控制器",
            route: "index",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(['routes']),
    username(){
      return window.sessionStorage.getItem('username')
    }

  },
  methods: {
    //删除tabs
    handleClose(route) {
      //控制器页面防止删除
      if (route == "index") {
        this.$message.error("请保留控制器页面");
        return false;
      }
      //获取位置
      var site = this.whiteList.indexOf(route);
      //删除缓存白名单
      this.whiteList.splice(site, 1);
      //删除tabs盒子
      this.tabs.tabsvalue.splice(site, 1);
      //如果删除的是当前所处页面
      if (this.$route.path == `/${route}`) {
        //console.log(1111111)
        //页面跳转
        this.$router.push({ name: this.whiteList[site - 1] });
        //更改avtive
        this.tabs.tabsindex = site;
      }
      site + 1 <= this.tabs.tabsindex ? --this.tabs.tabsindex : "";
      //总数-1
      --this.tabs.tabstotle;
    },

    //增加
    addtabs(name, route) {
      var site = this.whiteList.indexOf(route);
      if (site == -1) {
        //加入缓存白名单
        this.whiteList.push(route);
        //加入tabs
        this.tabs.tabsvalue.push({
          msg: name,
          route: route,
        });
        //总数+1
        ++this.tabs.tabstotle;
        //active切换
        this.tabs.tabsindex = this.tabs.tabstotle;
      } else {
        //console.log(site);
        //avtive切换
        this.tabs.tabsindex = ++site;
      }
    },
    //tabs跳转
    handleTo(route) {
      //console.log(this.$router.options.routes)
      var site = this.whiteList.indexOf(route);
      this.$router.push({ name: route });
      this.tabs.tabsindex = ++site;
    },
    //注销
    userreset(){
      this.$message('注销成功！');
      window.sessionStorage.clear()
      this.$router.push({name:'login'})
    }
  },
  //初始
  mounted() {
    //判断是否停留在index页面
    if (this.$route.path != "/index") {
      var nowpath = ''
      //遍历路由，寻找当前路由信息
      this.routes.forEach(ele=>{
        ele.children.forEach(o=>{
          if(o.path==this.$route.path){
            nowpath = o
          }
        })
      })
      //tabs加入当前停留页面信息
      this.addtabs(nowpath.chin,nowpath.name)
    }
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/style/style.scss";
.contain,
.el-container {
  width: 100%;
  height: 100%;
  .header{
    padding:0 20px;
    text-align: left;
    i{
      font-size: 30px;
      line-height: 50px;
      cursor: pointer;
    }
    span.title{
      font-size: 23px;
      line-height: 50px;
      vertical-align: bottom;
      margin-left: 10px;
      letter-spacing: 1px;
      font-weight: 600;
      color:#3d3d3d
    }
    span.reset{
      float: right;
      font-size: 16px;
      line-height: 50px;
      i{
        font-size: 16px;
        margin-right: 3px;
        margin-left: 10px;
      }
    }
  }
}
.el-aside {
  background-color: $background;
  .aside-logo {
    height: 50px;
    vertical-align: middle;
    //cursor: pointer;
  }
  & /deep/ .el-menu {
    border-right: 0;
  }
}
.el-menu-item,
.el-submenu {
  text-align: left;
  min-width:180px;
}
.el-header {
  padding: 0;
  .header {
    height: 50px;
    box-shadow: 0 1px 1px #f3f3f3;
    overflow: hidden;
  }
  .tem-nav {
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding: 0 20px;
    box-shadow: 0px 3px 10px #e2e2e2;
    .el-tag {
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
.el-footer{
  box-shadow: 0 0 10px #cacaca;
  box-sizing: border-box;
  p{
    line-height: 40px;
    margin:0;
    color: #686868;
  }
}
</style>
